<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>推荐-掘金</title>
  <link rel="stylesheet" href="../../public/css/zby/iconfont.css">
  <link rel="stylesheet" href="../../public/css/zby/attention.css">
  <link rel="stylesheet" href="../../public/css/zby/reset.css">
</head>

<body>
  <!-- 1.导航栏 -->
  <div class="header">
    <div class="common clearfix">
      <!-- 导航选项 -->
      <div class="navbar">
        <!-- logo图片 -->
        <a href="" class="logo">
          <img src="../../public/img/wmr/logo.png" alt="" class="logo-img">
        </a>
        <ul class="nav-ul clearfix">
          <li><a href="javascript:;">首页</a></li>
          <li><a href="javascript:;" class="boiling">沸点</a></li>
          <li><a href="javascript:;">话题</a></li>
          <li><a href="javascript:;">小册</a></li>
          <li><a href="javascript:;">活动</a></li>
          <li><a href="javascript:;" class="nth">有奖征文🎁</a></li>
        </ul>
      </div>
      <div class="header-right">
        <!-- 搜索 -->
        <div class="search">
          <form class="search-form">
            <input type="text" placeholder="搜索更新了" class="search-input">
            <img src="../../public/img/wmr/sousuo.png" alt="">
          </form>
        </div>
        <!-- 发沸点 -->
        <div class="add-group">
          <button class="btn-group">发沸点</button>
          <div class="more">
            <span id="btn-span" class="aspan">▼</span>
            <ul style="display:none;" class="more-ul">
              <li><a href="javascript:;">发布沸点</a></li>
              <li><a href="javascript:;">分享链接</a></li>
            </ul>
          </div>
        </div>
        <!-- 登陆注册 -->
        <div class="register">
          <span><a href="javascript:;">登录 ·</a></span>
          <span><a href="javascript:;">注册</a></span>
        </div>
      </div>
    </div>
  </div>

  <!-- 2.推荐导航栏 -->
  <div class="guide">
    <div class="common clearfix">
      <span class="referr">推荐</span>
      <span>前端</span>
      <span>Android</span>
      <span>iSO</span>
      <span>后端</span>
      <span>人工智能</span>
    </div>
  </div>

  <!-- 3.推荐关注列表 -->
  <div class="atten-list">
    <div class="common clearfix">
      <div class="atten">
        <img class="atten-img" src="../../public/img/zby/gz1.png" alt="">
        <div class="atten-info">
          <span>小生方勤</span>
          <img src="../../public/img/zby/lv-4.svg" alt="">
          <p class="atten-tag">高级打杂</p>
          <p class="atten-zan">获得 6515 赞 · 147835 阅读</p>
        </div>
        <div class="atten-btn">关注</div>
      </div>

      <div class="atten">
        <img class="atten-img" src="../../public/img/zby/gz2.png" alt="">
        <div class="atten-info">
          <span>ConardLi</span>
          <img src="../../public/img/zby/lv-4.svg" alt="">
          <p class="atten-tag">fe @ 10-11-6</p>
          <p class="atten-zan">获得 4937 赞 · 97835 阅读</p>
        </div>
        <div class="atten-btn">关注</div>
      </div>

      <div class="atten">
        <img class="atten-img" src="../../public/img/zby/gz3.png" alt="">
        <div class="atten-info">
          <span>木易杨说</span>
          <img src="../../public/img/zby/lv-4.svg" alt="">
          <p class="atten-tag">资深前端开发 @ 哈罗出行</p>
          <p class="atten-zan">获得 7175 赞 · 247235 阅读</p>
        </div>
        <div class="atten-btn">关注</div>
      </div>

      <div class="atten">
        <img class="atten-img" src="../../public/img/zby/gz4.png" alt="">
        <div class="atten-info">
          <span>花裤衩</span>
          <img src="../../public/img/zby/lv-5.svg" alt="">
          <p class="atten-tag">coder</p>
          <p class="atten-zan">获得 9415 赞 · 981116 阅读</p>
        </div>
        <div class="atten-btn">关注</div>
      </div>

      <div class="atten">
        <img class="atten-img" src="../../public/img/zby/gz5.png" alt="">
        <div class="atten-info">
          <span>第一名的小蝌蚪</span>
          <img src="../../public/img/zby/lv-3.svg" alt="">
          <p class="atten-tag">前端切图犬 @ 腾讯</p>
          <p class="atten-zan">获得 2670 赞 · 63630 阅读</p>
        </div>
        <div class="atten-btn">关注</div>
      </div>

      <div class="atten">
        <img class="atten-img" src="../../public/img/zby/gz6.png" alt="">
        <div class="atten-info">
          <span>宫秋</span>
          <img src="../../public/img/zby/lv-3.svg" alt="">
          <p class="atten-tag">切图工程师</p>
          <p class="atten-zan">获得 1373 赞 · 19906 阅读</p>
        </div>
        <div class="atten-btn">关注</div>
      </div>

      <div class="atten">
          <img class="atten-img" src="../../public/img/zby/gz7.png" alt="">
          <div class="atten-info">
            <span>无敌UFO</span>
            <img src="../../public/img/zby/lv-2.svg" alt="">
            <p class="atten-tag">full stack developer @ 求职中。。。</p>
            <p class="atten-zan">获得 708 赞 · 17918 阅读</p>
          </div>
          <div class="atten-btn">关注</div>
        </div>
  
        <div class="atten">
          <img class="atten-img" src="../../public/img/zby/gz8.png" alt="">
          <div class="atten-info">
            <span>前端小智</span>
            <img src="../../public/img/zby/lv-3.svg" alt="">
            <p class="atten-tag">web前端工程师</p>
            <p class="atten-zan">获得 2009赞 · 55672 阅读</p>
          </div>
          <div class="atten-btn">关注</div>
        </div>
  
        <div class="atten">
          <img class="atten-img" src="../../public/img/zby/gz9.png" alt="">
          <div class="atten-info">
            <span>megatron</span>
            <img src="../../public/img/zby/lv-3.svg" alt="">
            <p class="atten-tag">前端构架师 | CASC</p>
            <p class="atten-zan">获得 1352 赞 · 27271 阅读</p>
          </div>
          <div class="atten-btn">关注</div>
        </div>
  
        <div class="atten">
          <img class="atten-img" src="../../public/img/zby/gz10.png" alt="">
          <div class="atten-info">
            <span>刘小夕</span>
            <img src="../../public/img/zby/lv-5.svg" alt="">
            <p class="atten-tag">前端高级攻城狮 @ 京东</p>
            <p class="atten-zan">获得 3814 赞 · 98243 阅读</p>
          </div>
          <div class="atten-btn">关注</div>
        </div>
  
        <div class="atten">
          <img class="atten-img" src="../../public/img/zby/gz11.png" alt="">
          <div class="atten-info">
            <span>lentoo</span>
            <img src="../../public/img/zby/lv-3.svg" alt="">
            <p class="atten-tag">写bug @ 挪坑中</p>
            <p class="atten-zan">获得 3461 赞 · 77843 阅读</p>
          </div>
          <div class="atten-btn">关注</div>
        </div>
  
        <div class="atten">
          <img class="atten-img" src="../../public/img/zby/gz12.png" alt="">
          <div class="atten-info">
            <span>快狗打车前端团队</span>
            <img src="../../public/img/zby/lv-3.svg" alt="">
            <p class="atten-tag">前端开发 @ 快狗打车</p>
            <p class="atten-zan">获得 1573 赞 · 34506 阅读</p>
          </div>
          <div class="atten-btn">关注</div>
        </div>
    </div>
  </div>


  <script src="../../public/lib/jqurey/jquery.min.js"></script>
  <script src="../../public/js/zby/attention.js"></script>
  <script src="../../public/js/zby/iconfont.js"></script>
  <script>
    document.querySelector('#btn-span').onclick = function () {
      if (document.querySelector('.more-ul').style.display == 'none') {
        document.querySelector('.more-ul').style.display = 'block';
      } else {
        document.querySelector('.more-ul').style.display = 'none';
      }
    }
  </script>
</body>

</html>